extends layout

block content
  h1 WebSocket随机数演示
  p 此页面演示通过WebSocket接收服务器发送的随机数据
  
  .container
    h2 连接状态
    #connection-status.disconnected 未连接
  
  .container
    h2 控制面板
    .controls
      label(for="random-count") 随机数数量: 
      input#random-count(type="number", min="1", max="100", value="10")
      button#request-random 请求随机数
  
  .container
    h2 随机数据
    #random-numbers
      p 等待数据...
    
    h3 服务器消息
    #messages
      p 等待连接...
  
  .container
    h2 使用说明
    p WebSocket会自动每2秒发送一个随机数。
    p 您也可以通过点击"请求随机数"按钮来获取一批随机数。
    p 如果连接断开，系统将在5秒后自动尝试重新连接。
  
  script(src="/javascripts/websocket-client.js")
  link(rel="stylesheet", href="/stylesheets/websocket.css") 